
(function() {
    var yearData = [
      {
        year: "2020", // 年份
        data: [
          // 三个数组是因为有三条线
          [0,0,0,0,0,0,0,0,0,0]
        ]
      }
    ];
    // 1. 实例化对象
    var myChart = echarts.init(document.querySelector(".main .chart"));
    // 2.指定配置
    var option = {
      // 通过这个color修改两条线的颜色
      color: ["#00f2f1", "#ed3f35","#ede640"],
      tooltip: {
        trigger: "axis"
      },
      legend: {
        // 如果series对象有name 值，则legend可以不用写data
        // 修改图例组件 文字颜色
        textStyle: {
          color: "#4c9bfd"
        },
        // 这个10% 必须加引号
        right: "10%"
      },
      grid: {
        //控制图表大小
        top: "8%",
        left: "3%",
        right: "4%",
        bottom: "3%",
        show: true, // 显示边框
        borderColor: "#012f4a", // 边框颜色
        containLabel: true // 包含刻度文字在内
      },
      toolbox:{
        feature:{
          saveAsImage:{}
        }
      },
  
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: [
            "11:42",
            "12:02",
            "13:49",
            "14:13",
            "15:04", 
            "16:18",
            "17:04", 
            "18:04",
            "19:02",
            "20:06" 
        ],
        axisTick: {
          show: false // 去除刻度线
        },
        axisLabel: {
          color: "#4c9bfd" // 文本颜色
        },
        axisLine: {
          show: false // 去除轴线
        }
      },
      yAxis: {
        type: "value",
        axisTick: {
          show: false // 去除刻度线
        },
        axisLabel: {
          color: "#4c9bfd" // 文本颜色
        },
        axisLine: {
          show: false // 去除轴线
        },
        splitLine: {
          lineStyle: {
            color: "#012f4a" // 分割线颜色
          }
        },
      min: 0,
      max: 1,
      interval: 0.1,
      },
      series: [
        {
          name: "光照",
          type: "line",
          // true 可以让我们的折线显示带有弧度
          smooth: true,
          data: yearData[0].data[0]
        },
      ]
    };
  
    // 3. 把配置给实例对象
    myChart.setOption(option);
    // 4. 让图表跟随屏幕自动的去适应
    window.addEventListener("resize", function() {
      myChart.resize();
    });
  
    // 5.点击切换效果
    $(".line h2").on("click", "a", function() {
      // alert(1);
      // console.log($(this).index());
      // 点击 a 之后 根据当前a的索引号 找到对应的 yearData的相关对象
      // console.log(yearData[$(this).index()]);
      var obj = yearData[$(this).index()];
      option.series[0].data = obj.data[0];
      option.series[1].data = obj.data[1];
      // 需要重新渲染
      myChart.setOption(option);
    });
  })();